<template>
    <view>
        <uni-byt-top-com title="列表展示" :backShow="backShow"></uni-byt-top-com>
        <scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }">
            <view class="flex-col">
                <view class="flex-col mt-14">
                    <view class="flex-col my-14 mx-15">
                        <text class="text-size-16">基础列表展示：</text>
                        <text class="text-size-16 text-min-color">:columns="columns1";:data="data1"</text>
                    </view>
                    <view class="px-15">
                        <uni-byt-table v-slot="{ row }" @click="caoClick" :slotShow="true" :columns="columns1" :data="data1">
                            <u-button @click="rowClick(row)">我是插槽按钮</u-button>
                        </uni-byt-table>
                    </view>
                </view>

                <view class="flex-col mt-14">
                    <view class="flex-col my-14 mx-15">
                        <text class="text-size-16">设置列宽展示：</text>
                        <text class="text-size-16 text-min-color">:columns="columns2";:data="data2"</text>
                        <text class="text-size-16 text-min-color">
                            (columns2: [{ title: '苹果', key: 'a', width: 500 }, { title: '橘子', key: 'b', width: 200 }, ], data2: [{ a: '100元/斤', b: '200元/斤', }])
                        </text>
                    </view>
                    <view class="px-15">
                        <uni-byt-table :columns="columns2" :data="data2"></uni-byt-table>
                    </view>
                </view>

                <view class="flex-col mt-14">
                    <view class="flex-col my-14 mx-15">
                        <text class="text-size-16">右边最后一列固定展示：</text>
                        <text class="text-size-16 text-min-color">:columns="columns3";:data="data3"</text>
                        <text class="text-size-16 text-min-color">
                            ( columns3: [{ title: '苹果', key: 'a', }, { title: '橘子', key: 'b', }, { title: '哈密瓜', key: 'c', }, { title: '哈密瓜2', key: 'd', }, { title:
                            '哈密瓜2', key: 'e', }, { title: '哈密瓜2', key: 'f', fixed: 'right' }, ], data3: [{ a: '100元/斤', b: '200元/斤', c: '300元/斤', d: '300元/斤', e:
                            '300元/斤', f: '300元/斤', }],)
                        </text>
                    </view>
                    <view class="px-15">
                        <uni-byt-table :columns="columns3" :data="data3"></uni-byt-table>
                    </view>
                </view>

                <view class="flex-col mt-14">
                    <view class="flex-col my-14 mx-15">
                        <text class="text-size-16">左边第一列固定展示：</text>
                        <text class="text-size-16 text-min-color">:columns="columns4";:data="data4"</text>
                        <text class="text-size-16 text-min-color">
                            (columns4: [{ title: '苹果', key: 'a', fixed: 'left' }, { title: '橘子', key: 'b', }, { title: '哈密瓜', key: 'c', }, { title: '哈密瓜2', key: 'd', }, {
                            title: '哈密瓜2', key: 'e', }, { title: '哈密瓜2', key: 'f', fixed: 'right' }, ], data4: [{ a: '100元/斤', b: '200元/斤', c: '300元/斤', d: '300元/斤',
                            e: '300元/斤', f: '300元/斤', }],)
                        </text>
                    </view>
                    <view class="px-15">
                        <uni-byt-table :columns="columns4" :data="data4"></uni-byt-table>
                    </view>
                </view>

                <view class="flex-col mt-14">
                    <view class="flex-col my-14 mx-15">
                        <text class="text-size-16">空状态（最大展示列数）展示：</text>
                        <text class="text-size-16 text-min-color">:columns="columns5";:data="data5"，:colNum="5"</text>
                        <text class="text-size-16 text-min-color">
                            (columns5: [{ title: '橘子', key: 'b', }, { title: '哈密瓜', key: 'c', }, { title: '哈密瓜2', key: 'd', }, { title: '哈密瓜2', key: 'e', }, ], data5:
                            [],)
                        </text>
                    </view>
                    <view class="px-15">
                        <uni-byt-table :colNum="5" :columns="columns5" :data="data5"></uni-byt-table>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { getHeight } from '@/util';
export default {
    data() {
        return {
            scrollHeight: getHeight(),
            backShow: false,
            columns1: [
                {
                    title: '苹果',
                    key: 'a',
                    align: 'center'
                },
                {
                    title: '橘子',
                    key: 'b',
                    align: 'right'
                },
                {
                    title: '哈密瓜',
                    key: 'c',
                    align: 'center'
                },
                {
                    title: '哈密瓜',
                    key: 'd',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'key',
                    align: 'center',
                    fixed: 'right',
                    slotShow: true
                    // render: () => {
                    //     return `<button
                    // 	style="
                    // 	background-color: #3570f6;
                    // 	color: white;
                    // 	outline: none;
                    // 	border: none;
                    // 	padding:4px 14px;
                    // 	border-radius: 2px;
                    // 	"
                    // >按钮1</button>`;
                    // }
                }
            ],
            data1: [
                {
                    a: '100元/斤',
                    b: '200元/斤',
                    c: '300元/斤',
                    d: '300元/斤'
                },
                {
                    a: '2200元/斤',
                    b: '2300元/斤',
                    c: '2400元/斤',
                    d: '2500元/斤'
                }
            ],

            columns2: [
                {
                    title: '苹果',
                    key: 'a',
                    width: 500
                },
                {
                    title: '橘子',
                    key: 'b',
                    width: 200
                }
            ],
            data2: [
                {
                    a: '100元/斤',
                    b: '200元/斤'
                }
            ],

            columns3: [
                {
                    title: '苹果',
                    key: 'a'
                },
                {
                    title: '橘子',
                    key: 'b'
                },
                {
                    title: '哈密瓜',
                    key: 'c'
                },
                {
                    title: '哈密瓜2',
                    key: 'd'
                },
                {
                    title: '哈密瓜2',
                    key: 'e'
                },
                {
                    title: '哈密瓜2',
                    key: 'f',
                    fixed: 'right'
                }
            ],
            data3: [
                {
                    a: '100元/斤',
                    b: '200元/斤',
                    c: '300元/斤',
                    d: '300元/斤',
                    e: '300元/斤',
                    f: '300元/斤'
                }
            ],

            columns4: [
                {
                    title: '苹果',
                    key: 'a',
                    fixed: 'left'
                },
                {
                    title: '橘子',
                    key: 'b'
                },
                {
                    title: '哈密瓜',
                    key: 'c'
                },
                {
                    title: '哈密瓜2',
                    key: 'd'
                },
                {
                    title: '哈密瓜2',
                    key: 'e'
                },
                {
                    title: '哈密瓜2',
                    key: 'f',
                    fixed: 'right'
                }
            ],
            data4: [
                {
                    a: '100元/斤',
                    b: '200元/斤',
                    c: '300元/斤',
                    d: '300元/斤',
                    e: '300元/斤',
                    f: '300元/斤'
                }
            ],

            columns5: [
                {
                    title: '橘子',
                    key: 'b'
                },
                {
                    title: '哈密瓜',
                    key: 'c'
                },
                {
                    title: '哈密瓜2',
                    key: 'd'
                },
                {
                    title: '哈密瓜2',
                    key: 'e'
                }
            ],
            data5: []
        };
    },
    onLoad(play) {
        if (play.backShow) {
            if (play.backShow == '1') {
                this.backShow = true;
            }
        }
    },
    methods: {
        rowClick(row) {
            console.log('插槽按钮数据：', row);
        },
        caoClick(row) {
            console.log('操作列点击：', row);
            uni.$u.toast('点击事件：' + row.a);
        }
    }
};
</script>

<style scoped></style>